<script setup>
import {Delta, QuillEditor} from "@vueup/vue-quill";
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import {ref} from "vue";
import {post} from "@/net";
import {ElMessage} from "element-plus";
import {placeOrder} from "@/contract/nft";
import LightCard from "@/components/LightCard.vue";
import NFTCard from "@/components/NFT/NFTCard.vue";
import {useStore} from "@/store";

const props = defineProps({
  show: Boolean,
  title:String,
  description:String,
  image:String,
  tokenId:Number
})

const store = useStore()

const emit = defineEmits(['close','place'])

const price = ref(0)

const place = (price)=>{
  if(price.value <= 0){
    ElMessage.warning("请输入正确的价格")
    return
  }
  placeOrder(
      store.wallet.address,
      props.tokenId,
      price
  )
  emit("place")
}

</script>

<template>
  <div>
    <el-drawer :model-value="show"
               title="你确认上架当前NFT吗？"
               @close="emit('close')"
               direction="btt" :size="450"
               :close-on-click-modal="false">
      <div style="display: flex;gap: 10px;">
        <div style="width: 350px">
          <NFTCard :title="title"
          :image="image"
          :desc="description">
          </NFTCard>
        </div>
        <div style="flex: 1;display: flex;flex-direction: column;gap: 10px;">
          <div style="display: flex;">
            <el-input v-model="price" type="number" placeholder="请输入价格（CUSDT）"/>
            <el-button type="success" style="margin-left: 10px" @click="place(price)" plain>确认上架</el-button>
          </div>
          <div style="text-align: left">
            <div style="text-align: center">
              CUSDT说明：
            </div>
            <div style="font-size: 15px;color: grey">
              CUSDT代币的设计目的可能是为了在特定的生态系统或平台中使用，类似于其他代币如USDT（Tether）。CUSDT代币可以在以太坊网络上进行创建、转账和交易。它具有与其他ERC20代币相同的特性，例如可分割性、可替代性和便捷性。
              作为ERC20代币，CUSDT可以被存储在兼容的以太坊钱包中，并且可以通过以太坊的智能合约进行操作。
            </div>
          </div>

        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style lang="less" scoped>
:deep(.el-drawer) {
  width: 700px;
  margin: 20px auto;
  border-radius: 10px;
}
:deep(.el-drawer__header) {
  margin: 0;
}
:deep(.el-drawer__body) {
  padding: 10px;
}
</style>
